<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-count-to :endVal="value" @end="end"></uv-count-to>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">倒计数</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-count-to :startVal="startVal1"></uv-count-to>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">显示小数位</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-count-to
                  :startVal="startVal2"
                  :endVal="endVal"
                  :decimals="decimals"
               ></uv-count-to>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">千分位分隔符</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-count-to
                  :startVal="startVal3"
                  :endVal="endVal2"
                  separator=","
                  :decimals="decimals"
               ></uv-count-to>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义控制</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-count-to ref="uCountTo" :endVal="endVal3" :autoplay="autoplay"></uv-count-to>
            </view>
         </view>
         <view class="uv-demo-block__content">
            <view class="" style="flex: 1">
               <uv-grid border align="center" customStyle="margin-top: 20px;margin-bottom: 20">
                  <uv-grid-item @click="start">
                     <view class="uv-grid-slot">
                        <view class="uv-grid-slot__circle">
                           <text class="uv-grid-slot__circle__text">开始</text>
                        </view>
                     </view>
                  </uv-grid-item>
                  <uv-grid-item @click="paused">
                     <view class="uv-grid-slot">
                        <view class="uv-grid-slot__circle">
                           <text class="uv-grid-slot__circle__text">暂停</text>
                        </view>
                     </view>
                  </uv-grid-item>
                  <uv-grid-item @click="resume">
                     <view class="uv-grid-slot">
                        <view class="uv-grid-slot__circle">
                           <text class="uv-grid-slot__circle__text">继续</text>
                        </view>
                     </view>
                  </uv-grid-item>
               </uv-grid>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-count-to
                  :endVal="value"
                  color="#909399"
                  :fontSize="fontSize"
                  :bold="true"
               ></uv-count-to>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 响应式数据
const value = ref(3000);
const startVal1 = ref(300);
const startVal2 = ref(100.0);
const endVal = ref(10.55);
const decimals = ref(2);
const startVal3 = ref(2000);
const endVal2 = ref(1542);
const endVal3 = ref(3000);
const autoplay = ref(false);
const fontSize = ref(40);

// ref 引用
const uCountTo = ref();

// 生命周期
onMounted(() => {
   // setTimeout(() => {
   //   value.value = 3000
   // }, 3000)
});

// 方法
const start = () => {
   uCountTo.value?.start();
};

const paused = () => {
   uCountTo.value?.stop();
};

const resume = () => {
   uCountTo.value?.restart();
};

const end = () => {
   console.log('end');
};
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';
.uv-demo-block__content {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
}

.uv-grid-slot {
   border-radius: 100px;
   border-color: #dbfbdb;
   border-width: 2px;
   @include flex;

   &__circle {
      @include flex;
      width: 50px;
      height: 50px;
      background-color: #dbfbdb;
      border-radius: 100px;
      justify-content: center;
      align-items: center;
      margin: 2px;

      &__text {
         color: rgb(25, 190, 107);
         font-size: 13px;
      }
   }
}
</style>
